<template>
  <div class='content'>
    <div class='title'>
      <div></div>
      <p>最近报警</p>
    </div>

    <div class='table-wrap'>
      <el-table
        :data='tableData'
        style='width: 100%'
        :row-class-name=' ()=>"row"'
        :header-row-class-name='()=>"header-row"'
      >
        <el-table-column
          prop='created_at'
          label='时间'
          align='center'
        >
        </el-table-column>
        <el-table-column
          prop='level'
          label='级别'
          align='center'
        >
        </el-table-column>
        <el-table-column
          prop='describe'
          label='描述'
          align='center'
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Alarm',
  props:['tableData'],
  data() {
    return {
      // tableData: [{
      //   date: '2016-05-02',
      //   name: '王小虎',
      //   address: '上海市普弄',
      // }, {
      //   date: '2016-05-04',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙弄',
      // }, {
      //   date: '2016-05-01',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路',
      // }, {
      //   date: '2016-05-03',
      //   name: '王小虎',
      //   address: '上海市普陀区金弄',
      // }],
    }
  },
}
</script>

<style lang='scss' scoped>
.content {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 78px 13px 0;

  .title {
    width: 90px;
    position: absolute;
    left: 0;
    top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    div {
      width: 6px;
      height: 30px;
      background: #007CF0;
      border-radius: 2px;
    }

    p {
      font-size: 17px;
      font-family: Source Han Sans CN;
      font-weight: 600;
      color: #222222;
    }
  }
}
</style>
